<template>
	<!-- 老版本：根据根字体计算元素宽度 -->
	<page-meta @resize="resize"  :root-font-size="`${pageMeta.rootFontsize}px`">
	</page-meta>
</template>

<script>
	export default {
		props: {
			'outerLength': Number,
			'listLen': Number,
			'outPercent': {
				type: Number,
				default: 0.8
			},
		},
		data() {
			return {
				nums: 0,
				pageMeta: {
					windowWidth: '',
					rootFontsize: 0,
				},
			}
		},
		mounted() { //完成模板渲染后首次赋值
			this.pageMeta.windowWidth = uni.getSystemInfoSync().windowWidth
			this.pageMeta.rootFontsize = (this.pageMeta.windowWidth / 375) * 10
			this.reCalcPaddingLength()
			console.log(this.listLen)
		},
		watch: { 
			'pageMeta.rootFontsize'(e) {//观察rootFontsize的变化，限制了最大16px后屏幕再大也不缩放了
				e > 16 ? this.pageMeta.rootFontsize = 16 : ''
			},
			'pageMeta.windowWidth'(e) { //观察页面宽度变化，设置需要补充的区块
				this.reCalcPaddingLength()
			},
			'nums'(e) {  //观察补充区块的数量变化，动态传递给父组件
				this.$emit('nums', this.nums);
			}

		},
		methods: {
			// uni自带的resize处理方法:屏幕变化时返回尺寸
			resize(e) {
				this.pageMeta.windowWidth = e.size.windowWidth;
				this.pageMeta.rootFontsize = (e.size.windowWidth / 375) * 10
				this.reCalcPaddingLength()
				this.$emit('attr', this.pageMeta); // 调用父组件传递过来的方法，同时把数据传递出

			},
			// 动态调整需要补充的块
			reCalcPaddingLength() {
				// console.log(e)
				// let Len = this.listLen //子元素的数量
				// e ? len = e : ''

				// let outLength=1000   //容器的宽度
				// let outLength = this.pageMeta.windowWidth * this.outPercent
				let outLength = this.outerLength
				let inLength = this.pageMeta.rootFontsize * 10 //每个元素的宽度
				let lineCapacity = Math.floor(outLength / inLength) // 计算每行放几个
				let paddingLength = Math.floor(this.listLen / lineCapacity) // 计算可以放几行
				let nums = lineCapacity - (this.listLen - (lineCapacity * paddingLength))
				if (lineCapacity == nums) {
					nums = 0
				}
				this.nums = nums

			},
			// 父组件通过ref的方式获取数据
			getVal() {
				return this.pageMeta
			}
		}
	}
</script>

<style>

</style>
